<template>
  <el-dialog
    title="数据清洗进度"
    :visible.sync="dialogVisible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :append-to-body="true"
  >
    <div class="cleaning-status">
      <el-steps :active="cleanStatus === 'success' ? 3 : cleanStatus === 'error' ? 2 : 1" finish-status="success">
        <el-step title="开始清洗" description="正在分析文件"></el-step>
        <el-step title="数据清洗" description="正在处理数据"></el-step>
        <el-step title="完成" description="清洗完成"></el-step>
      </el-steps>

      <div class="cleaning-progress">
        <el-progress 
          v-if="['success', 'error', ''].includes(cleanStatus)"
          :percentage="progress"
          :status="progressBarStatus"
        />
      </div>

      <div class="cleaning-message" :class="cleanStatus">
        <i :class="statusIcon"></i>
        <span>{{ message }}</span>
      </div>

      <div v-if="errors && errors.length > 0" class="cleaning-errors">
        <div class="error-title">发现以下问题：</div>
        <el-scrollbar style="height: 200px">
          <ul>
            <li v-for="(error, index) in errors" :key="index">{{ error }}</li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'DataCleaningDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    cleanStatus: {
      type: String,
      default: 'processing',
      validator: function(value) {
        return ['processing', 'success', 'error', 'exception', ''].includes(value);
      }
    },
    message: {
      type: String,
      default: ''
    },
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    },
    errors: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    },
    statusIcon() {
      switch (this.cleanStatus) {
        case 'success':
          return 'el-icon-success';
        case 'error':
          return 'el-icon-error';
        default:
          return 'el-icon-loading';
      }
    },
    progressBarStatus() {
      // 只允许el-progress支持的值
      if (this.cleanStatus === 'success') return 'success';
      if (this.cleanStatus === 'error') return 'exception';
      return '';
    }
  }
};
</script>

<style scoped>
.cleaning-status {
  padding: 20px;
}

.cleaning-progress {
  margin: 20px 0;
}

.cleaning-message {
  display: flex;
  align-items: center;
  margin: 20px 0;
  padding: 10px;
  border-radius: 4px;
}

.cleaning-message i {
  margin-right: 10px;
  font-size: 20px;
}

.cleaning-message.processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.cleaning-message.success {
  background-color: #f6ffed;
  color: #52c41a;
}

.cleaning-message.error {
  background-color: #fff2f0;
  color: #f5222d;
}

.cleaning-errors {
  margin-top: 20px;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  padding: 10px;
}

.error-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #f5222d;
}

.cleaning-errors ul {
  margin: 0;
  padding-left: 20px;
}

.cleaning-errors li {
  color: #666;
  margin-bottom: 5px;
}
</style> 